<template>
  <div class="listbody">
    <el-table
      v-loading="loading"
      :data="tableData"
      class="commtable"
      style="width: 100%"
    >
      <el-table-column prop="date" align="center" label="用户信息" width="200">
        <template slot-scope="scope">
          <img
            v-if="scope.row.wxuser.photo"
            :src="scope.row.wxuser.photo"
            alt=""
            class="avatar"
          />
          <div class="f-13 c_000">{{ scope.row.wxuser.name || "-" }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="date" align="center" label="奖项名称">
        <template slot-scope="scope">
          <span>{{ scope.row.draw.draw_name || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" align="center" label="中奖时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.create_time) || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" align="center" label="核销状态">
        <template slot-scope="scope">
          <div v-if="scope.row.is_cash == 1">
            <div v-if="!scope.row.more">
              <el-tag type="info" class="tag_info">未核销</el-tag>
            </div>
            <div v-else>
              <el-tag type="info" class="tag_info" v-if="scope.row.status == 0"
                >未核销</el-tag
              >
              <el-tag type="success" class="tag_success" v-else>已核销</el-tag>
            </div>
          </div>
          <div v-else>
            <el-tag type="info" class="tag_info" v-if="scope.row.status == 0"
              >未核销</el-tag
            >
            <el-tag type="success" class="tag_success" v-else>已核销</el-tag>
          </div>
          <!-- <el-tag type="success" class="tag_success">{{ scope.row.status }}已核销</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="发货状态" align="center">
        <template slot-scope="scope">
          <!-- 上门自取为- -->
          <div v-if="scope.row.is_cash == 2">-</div>
          <div v-else>
            <div v-if="scope.row.more">
              <el-tag
                v-if="scope.row.status == 0 || scope.row.status == 2"
                type="warning"
                class="tag_warning"
                >待发货</el-tag
              >
              <el-tag
                v-if="scope.row.status == 3"
                type="success"
                class="tag_success"
                >已发货</el-tag
              >
            </div>
            <div v-else>-</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="260">
        <template slot-scope="scope">
          <div class="flexcenter full_w btnflex flexwrapper">
            <div
              v-if="scope.row.is_cash == 1"
              class="commhover btn_green mr_5 c_fff mb_5"
              @click="handleAdd(scope.row)"
            >
              添加物流单
            </div>
            <!-- 上门自取 -->
            <div v-if="scope.row.is_cash == 2">
              <div
                v-if="scope.row.status == 0"
                class="commhover btn_yellow mr_5 c_fff mb_5"
                @click="handleHx(scope.row)"
              >
                核销
              </div>
              <div
                v-else
                class="commhover btn_yellow mr_5 c_fff mb_5"
                @click="handleCx(scope.row)"
              >
                撤销核销
              </div>
            </div>
            <!-- 邮寄 -->
            <div v-else>
              <div v-if="scope.row.more"
                class="commhover btn_yellow mr_5 c_fff mb_5"
                @click="handleCx(scope.row)"
              >
                撤销核销
              </div>
              <div v-else
                class="commhover btn_yellow mr_5 c_fff mb_5"
                @click="handleAddress(scope.row)"
              >
                核销
              </div>
            </div>
            <div
              v-if="scope.row.more&&scope.row.more.province"
              class="commhover btn_green mr_5 c_fff mb_5"
              @click="handleDetail(scope.row)"
            >
              查看收货信息
            </div>
            <div v-if="scope.row.track_name && scope.row.track_number"
              class="commhover btn_blue c_fff mr_5 mb_5"
              @click="handleWl(scope.row)"
            >
             查看物流
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.num"
      @pagination="getList"
    />
    <el-dialog
      :visible.sync="open"
      width="600px"
      :before-close="closeOpen"
      center
    >
      <template slot="title">
        <div class="textcenter f-16 c_000">查看收货信息</div>
      </template>
      <el-form ref="form" label-width="110px" v-if="open">
        <el-form-item label="收货人：">
          <el-input v-model="rowobj.more.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="收货人地址：">
          <el-input
            v-model="rowobj.allAdress"
            type="textarea"
            rows="3"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="收货人电话：" class="mb_0">
          <el-input v-model="rowobj.more.phone" readonly></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer"  v-if="open">
        <el-button
          type="primary"
          v-clipboard:copy="
            '收货人：' +
            rowobj.more.name +
            ' 收货人地址：' +
            rowobj.allAdress +
            ' 收货人电话：' +
            rowobj.more.phone
          "
          v-clipboard:success="clipboardSuccess"
          >复 制</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="添加物流单"
      :visible.sync="openwl"
      width="680px"
      class="dialogheaderbg"
      :before-close="handleClose"
    >
      <el-form
        ref="wlform"
        :model="wlform"
        :rules="wlrules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="快递公司" prop="track_name">
          <el-input v-model="wlform.track_name" placeholder="请输入快递公司" />
        </el-form-item>
        <el-form-item label="快递单号" prop="track_number">
          <el-input
            v-model="wlform.track_number"
            placeholder="请输入快递单号"
            maxlength="50"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 核销 -->
    <el-dialog
      title="核销奖券"
      :visible.sync="hexopen"
      width="900px"
      class="dialogheaderbg"
      :before-close="handleClosehx"
    >
      <hexiao-comp v-if="hexopen" :row="row" @close="handleClosehx" />
    </el-dialog>

    <!-- 详情 -->
    <el-dialog
      title="物流详情"
      :visible.sync="detailOpen"
      width="760px"
      class="dialogheaderbg"
      :before-close="handleDetailClose"
    >
      <view-comp v-if="detailOpen" :row="row" @close="handleDetailClose" />
    </el-dialog>
  </div>
</template>

<script>
import {
  codeList,
  orderSend,
  destroySelectCode,
  chanelDestroyCode,
  indexExport
} from "@/api/hexiao";
import HexiaoComp from "./components/HexiaoComp.vue";
import ViewComp from "./components/ViewComp.vue";
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      queryParams: {
        page: 1,
        num: 10,
        task_id: "",
      },
      total: 0,
      openwl: false,
      wlform: {
        track_number: "",
        track_name: "",
        id: "",
        task_id:''
      },
      wlrules: {
        track_name: [
          { required: true, message: "请输入快递公司", trigger: "blur" },
        ],
        track_number: [
          { required: true, message: "请输入快递单号", trigger: "blur" },
        ],
      },
      open: false,
      hexopen: false,
      row: "",
      rowobj: null,
      detailOpen:false,
    };
  },
  components: {
    HexiaoComp,
    ViewComp
  },

  created() {
    let id = this.$route.query.id;
    if (id) {
      this.queryParams.task_id = id;
    }
    this.getList();
  },
  props: {
    type: {
      default: "",
    },
  },
  methods: {
    getList() {
      this.loading = true;
      let params = { ...this.queryParams };
      if (this.type || this.type === 0) {
        params.status = this.type;
      }
      codeList(params).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.count;
        this.loading = false;
      });
    },

    reflush() {
      this.getList();
    },

    handleAddress(row) {
      this.row = row;
      this.hexopen = true;
    },

    handleClosehx(type) {
      if (type == 1) {
        this.getList();
      }
      this.hexopen = false;
    },

    handleHx(row) {
      this.$confirm("是否确定核销?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          destroySelectCode({ task_id: row.task_id, code: row.code }).then(
            (res) => {
              this.$message.success("核销成功");
              this.getList();
            }
          );
        })
        .catch(() => {});
    },

    handleCx(row) {
      this.$confirm("是否设为未核销?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("----");
          chanelDestroyCode({ task_id: row.task_id, id: row.id }).then(() => {
            this.$message.success("撤销成功");
            this.getList();
          });
        })
        .catch(() => {});
    },

    handleDetail(item) {
      this.rowobj = item;
      let address = ''
      if(item.more.province){
        address = item.more.province
      }
      if(item.more.city){
        address += item.more.city
      }
      if(item.more.area){
        address += item.more.area
      }
      if(item.more.address){
        address += item.more.address
      }
      this.rowobj.allAdress = address
        // item.more.province?item.more.province:'' + item.more.city?item.more.city:''  + item.more.area?item.more.area:'' + item.more.address? item.more.address:''
      this.open = true;
    },

    closeOpen() {
      this.open = false;
    },
    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },

    handleClose() {
      this.openwl = false;
    },

    handleAdd(row) {
      if (!row.more) {
        this.$message.warning("请先填写收货地址");
        return;
      }
      this.wlform.id = row.id;
      this.wlform.task_id = row.task_id
      this.wlform.track_name = row.track_name;
      this.wlform.track_number = row.track_number;
      this.openwl = true;
    },

    submit() {
      this.$refs.wlform.validate((valid) => {
        if (!valid) return;
        orderSend(this.wlform).then((res) => {
          this.$message.success("添加成功");
          this.handleClose();
          this.getList();
        });
      });
    },

    handleClose() {
      this.openwl = false;
    },

    handleWl(row){
      this.row = row
      this.detailOpen = true
    },

    handleDetailClose(){
      this.detailOpen = false
    },

    download(){
      let params = {
        task_id:this.queryParams.task_id,
        head:['用户名','奖项名称','中奖时间','核销状态','收获地址（省份）','收获地址（城市）','收获地址（地区）','详细地址','联系人','联系电话'],
        keys:['wxuser.name','draw_name','create_time','status_name','more.province','more.city','more.area','more.address','more.name','more.phone'],
      }
      if (this.type || this.type === 0) {
        params.status = this.type;
      }
      indexExport(params).then(res=>{
        let url = res.data
        this.$message.success("正在下载，请稍后");
        var a = document.createElement("a");
        a.setAttribute("href", url);
        a.click();
        this.$emit('downsuccess')
        // this.exportloading = false
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.listbody {
  height: calc(100vh - 162px);
  overflow-y: auto;
  padding-bottom: 25px;
}
.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.listbox {
  padding: 25px;
  border-bottom: 1px solid #d9d9d9;
  &:hover {
    background-color: #f4f7fe;
  }
}
.itemleft {
  width: calc(100% - 260px);
  padding-right: 20px;
}
.itemright {
  max-width: 260px;
  height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.fmimg {
  width: 140px;
  height: 90px;
  border-radius: 8px;
}
.c_b3 {
  color: #b3b3b3;
}
.imgcode {
  width: 178px;
  height: 178px;
}
.boximg {
  width: 260px;
}
.downbtn {
  border-radius: 4px;
  height: 32px;
  width: 100px;
  border: 1px solid #bfbfbf;
}
.btn_c {
  padding: 3px 10px;
  border: 1px solid #bebebe;
  color: #000;
  border-radius: 5px;
}
</style>
<style lang="scss">
.appendbg {
  .el-input-group__append {
    background-color: #4a73ff;
    color: white;
  }
}
</style>